import React, { Component } from 'react'
import axios from "axios"
class App extends Component {
  state = {
      arr:[],// 放请求回来数据的数组
      checkAll:false, // 全选得变量
      sum:0 // 求和得变量
  }
  componentDidMount(){
        axios.get("/list").then(res=>{
            console.log(res.data);
            this.setState({
                arr:res.data.list
            })
        })
  }
  // 购物车加加得方法
  addFn(ind){
    this.state.arr.forEach((item,index)=>{
        if (index == ind) {
            item.num++
        }
    })
    console.log(this.state.arr)
    this.setState({
        arr:this.state.arr
    })
    this.sumFn()
  }
  // 购物车减减得函数
  del(ind){
    this.state.arr.forEach((item,index)=>{
        if (index == ind) {
            item.num--;
            if (item.num<0){
                item.num = 0
                alert("不能在减了")
            }
        }
    })
    this.setState({
        arr: this.state.arr
    })
    this.sumFn()
  }
  // 购物车全选得方法
  checkAll(){
     this.setState({
         checkAll:!this.state.checkAll
     })
     // this.setSate是一个异步得，我想去每一个checkbox得状态，需要在这句话后加一个延时器
     setTimeout(()=>{
        let crr = this.state.arr.map((item,index)=>{
           // 让每一项得选中状态都与this。satte。checkAll保持一致
           item.flag = this.state.checkAll
           return item
        })
        console.log(crr)
        this.setState({
            arr:crr
        })
        this.sumFn()
     },200)
  }
  // 某一个checkbox被选中得事件 
 checkitem(ind){
    console.log(ind)
    this.state.arr.forEach((item,index)=>{
        if (index == ind) {
            item.flag = !item.flag
        }
    })
    let fanxuan = this.state.arr.every((item,index)=>{
        return item.flag
    })
    this.setState({
        checkAll:fanxuan, 
        arr:this.state.arr // 最好写上
    })
    this.sumFn()
 }
 // 购物车求和得方法
 sumFn(){ // 要求和前首先要考虑这个商品有没有被选中，这个函数将在每一个操作的时候被调用
    let zongshu = this.state.arr.reduce((a,b)=>{ // a代表累计值，b 代表当前值
        if (b.flag) {
            return a + b.price* b.num
        } else {
            return a
        }
    },0)
    this.setState({
        sum:zongshu
    })
 }
  render() {
    return (
      <div className='appwrap' >
          <div className='one'>
            {
                this.state.arr&&this.state.arr.length?this.state.arr.map((item,index)=>{
                    return <div key={index} style={{marginTop:'30px'}}>
                        <input type="checkbox" checked={item.flag} onChange={this.checkitem.bind(this,index)}/>
                        <img src={item.img} alt="" />
                        <span>商品名称：{item.title}</span>
                        <p>价格：{item.price}</p>

                            <p><button onClick={this.del.bind(this,index)}>--</button>个数{item.num}<button onClick={this.addFn.bind(this,index)}>++</button></p>
                            

                    </div>
                }):"暂无数据"
            }
          </div>
         
         
          <div className='footer'>
              <span>全选</span>
              <input type="checkbox" checked={this.state.checkAll} onChange={this.checkAll.bind(this)}/>
              <span>总价:{this.state.sum}</span>
          </div>
      </div>
    )
  }
}

export default App